<template>
  <div class="app-container">
    <el-card header="基本信息">
      <el-form size="small" label-suffix="：" class="basic-info">
        <el-form-item label="订单ID">{{ orderDetail.id }}</el-form-item>
        <el-form-item label="订单状态"
          ><el-tag
            v-if="orderDetail.status"
            :type="rightOrderStatusTag[orderDetail.status].type"
            :color="rightOrderStatusTag[orderDetail.status].color"
            >{{ rightOrderStatus.getValue(orderDetail.status) }}</el-tag
          ></el-form-item
        >
        <el-form-item label="会员ID">{{ orderDetail.memberId }}</el-form-item>
        <el-form-item label="订单编号">{{ orderDetail.orderNum }}</el-form-item>
        <el-form-item label="权益类型">{{
          benefitTypes.getValue(orderDetail.benefitCode)
        }}</el-form-item>
        <el-form-item label="创建时间">{{
          orderDetail.createdAt | formatDate
        }}</el-form-item>
        <el-form-item label="更新时间">{{
          orderDetail.updatedAt | formatDate
        }}</el-form-item>
      </el-form>
    </el-card>

    <el-card header="支付信息" style="margin-top: 12px">
      <el-form size="small" label-suffix="：" class="payment-info">
        <el-form-item label="总金额（元）">{{
          orderDetail.totalAmount | formatCentToYuan
        }}</el-form-item>
        <el-form-item label="支付方式">{{
          orderDetail.payType | formatPayType
        }}</el-form-item>
        <el-form-item label="商品优惠金额（元）">{{
          orderDetail.discountAmount | formatCentToYuan
        }}</el-form-item>
        <el-form-item label="积分抵扣金额（元）">{{
          orderDetail.integrationAmount | formatCentToYuan
        }}</el-form-item>

        <!--物流-->
        <el-form-item label="运费金额（元）">{{
          orderDetail.freightAmount | formatCentToYuan
        }}</el-form-item>
        <el-form-item label="运费优惠金额（元）">{{
          orderDetail.freightDiscountAmount | formatCentToYuan
        }}</el-form-item>

        <el-form-item label="应付金额（元）">{{
          orderDetail.payAmount | formatCentToYuan
        }}</el-form-item>

        <el-form-item label="支付时间">{{
          orderDetail.paymentTime | formatDate
        }}</el-form-item>
      </el-form>
    </el-card>

    <el-card header="收货信息"  style="margin-top: 12px">
      <el-form size="small" label-suffix="：" class="basic-info">
        <el-form-item label="收件人">{{ orderDetail.receiverName }}</el-form-item>
        <el-form-item label="收件人手机号">{{ orderDetail.receiverPhone }}</el-form-item>
        <el-form-item label="收货地址">{{ orderDetail.receiverDetailAddress }}</el-form-item>
      </el-form>
    </el-card>

    <el-card header="商品信息" style="margin-top: 12px">
      <el-table :data="orderDetail.items">
        <el-table-column prop="productId" label="ID"></el-table-column>
        <el-table-column
          prop="manufacturer"
          label="生产厂家"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="productGenericName"
          label="通用名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="商品名称"
          prop="productName"
          show-overflow-tooltip
        />
        <el-table-column label="价格（元）" min-width="90"
          ><template slot-scope="{ row }">{{
            row.productPrice | formatCentToYuan
          }}</template></el-table-column
        >
        <el-table-column label="数量"
          ><template slot-scope="{ row }"
            >{{ row.quantity }}{{ row.unit }}</template
          ></el-table-column
        >
        <el-table-column label="规格" prop="specification" />
        <el-table-column label="图片" prop="productImageUrl"
          ><template slot-scope="{ row }"
            ><el-image
              fit="contain"
              style="width: 100%; height: 100px"
              :src="row.productImageUrl"
              :preview-src-list="[row.productImageUrl]"
            >
            </el-image></template
        ></el-table-column>

        <el-table-column label="创建人" prop="createdBy" />
        <el-table-column label="创建时间" width="150"
          ><template slot-scope="{ row }">{{
            row.createdAt | formatDate
          }}</template></el-table-column
        >
        <el-table-column prop="updateBy" label="修改人" />
        <el-table-column label="修改时间" width="150"
          ><template slot-scope="{ row }">{{
            row.updatedAt | formatDate
          }}</template></el-table-column
        >

        <el-table-column label="可用状态"
          ><template slot-scope="{ row }">
            <el-tag :type="row.isDeleted ? 'danger' : ''" size="medium">
              {{ row.isDeleted ? "已删除" : "可用" }}
            </el-tag></template
          ></el-table-column
        >
      </el-table>
    </el-card>

    <el-card
      v-if="orderDetail.prescription"
      header="处方信息"
      style="margin-top: 12px"
    >
      <el-form size="small" label-suffix="：" class="prescription-info">
        <el-form-item label="处方ID">{{
          orderDetail.prescription.id
        }}</el-form-item>
        <el-form-item label="处方编号">{{
          orderDetail.prescription.prescriptionNo
        }}</el-form-item>
        <el-form-item label="疾病名称">{{
          orderDetail.prescription.diseaseName
        }}</el-form-item>
        <el-form-item label="姓名">{{
          orderDetail.prescription.fullName
        }}</el-form-item>
        <el-form-item label="证件类型">{{
          orderDetail.prescription.idType | formatIdType
        }}</el-form-item>
        <el-form-item label="证件号码">{{
          orderDetail.prescription.idNum
        }}</el-form-item>

        <el-form-item label="处方图片">{{
          orderDetail.prescription.prescriptionImageUrl
        }}</el-form-item>

        <el-form-item label="创建人">{{
          orderDetail.prescription.createdBy
        }}</el-form-item>
        <el-form-item label="创建时间">{{
          orderDetail.prescription.createdAt | formatDate
        }}</el-form-item>
        <el-form-item label="修改人">{{
          orderDetail.prescription.updatedBy
        }}</el-form-item>
        <el-form-item label="修改时间">{{
          orderDetail.prescription.updatedAt | formatDate
        }}</el-form-item>
        <el-form-item label="可用状态">
          <el-tag
            :type="orderDetail.prescription.isDeleted ? 'danger' : ''"
            size="medium"
          >
            {{ orderDetail.prescription.isDeleted ? "已删除" : "可用" }}
          </el-tag>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";
import { fetchRightOrderDetail } from "@/api/sms";
import {
  benefitTypes,
  rightOrderStatus,
  rightOrderStatusTag,
} from "@/utils/constant/sms";
import { formatCentToYuan } from "@/utils/format";

export default {
  name: "orderDetail",

  data() {
    return {
      rightOrderStatusTag,
      rightOrderStatus,
      benefitTypes,
      orderDetail: {
        benefitCode: undefined,
        createdAt: "",
        discountAmount: undefined,
        freightAmount: undefined,
        freightDiscountAmount: undefined,
        id: undefined,
        integrationAmount: undefined,
        items: [],
        memberId: undefined,
        orderNum: "",
        payAmount: undefined,
        payType: undefined,
        paymentTime: "",
        prescription: {
          createdAt: "",
          createdBy: "",
          diseaseName: "",
          fullName: "",
          id: undefined,
          idNum: "",
          idType: undefined,
          isDeleted: false,
          prescriptionImageUrl: "",
          prescriptionNo: "",
          rightOrderId: undefined,
          updatedAt: "",
          updatedBy: "",
        },
        status: undefined,
        totalAmount: undefined,
        updatedAt: "",
      },
    };
  },

  computed: {
    orderId() {
      return this.$route.query.id;
    },
  },

  watch: {
    orderId: {
      handler(newVal) {
        newVal && this.init();
      },
      immediate: true,
    },
  },

  created() {},

  filters: {
    formatDate(value) {
      if (!value) return "/";

      let date = new Date(value);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");

      return value;
    },

    formatPayType(value) {
      if (value === 0) {
        return "未支付";
      } else if (value === 1) {
        return "微信支付";
      }

      return value;
    },
    formatCentToYuan,

    formatIdType(value) {
      if (value === 0) {
        return "身份证";
      }

      return value;
    },
  },

  methods: {
    init() {
      fetchRightOrderDetail(this.orderId).then((res) => {
        if (res.code === 200) {
          this.orderDetail = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container /deep/ .el-form-item__content {
  &:empty:before {
    content: "/";
  }
}

.basic-info,
.payment-info,
.prescription-info {
  display: grid;
  grid-template-columns: auto auto auto auto;
}
</style>
